<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年09月05日 14:57
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <div class="main-container">
      <div class="anchor-container">
        <SearchType @handleSearchTypeTabClick="handleSearchTypeTabClick" />
        <Anchor :searchDesc="searchDesc" :activeSearchTypeTab="activeSearchTypeTab" @handleTabClick="handleTabClick" />
      </div>
      <div class="article-list-right-container">
        <ArticleList
          ref="articleList"
          :activeTab="activeTab"
          :activeSearchTypeTab="activeSearchTypeTab"
          :keyWord="keyWord"
          :blogType="blogType"
          :blogTag="blogTag"
        />
        <RightPanel />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import RightPanel from "../rightPanel/index.vue";
import ArticleList from '../search/list/index.vue'
import Anchor from './anchor/index.vue'
import SearchType from "@/views/search/anchor/searchType.vue";

@Component({
  components: {
    SearchType,
    Anchor,
    ArticleList,
    RightPanel
  }
})
export default class index extends Vue {

  @Watch('$route.query.keyWord', { immediate: true, deep: true })
  keyWordChange(newVal: string, oldVal: string) {
    this.keyWord = newVal !== '' ? this.$route.query.keyWord : '';
  }
  @Watch('$route.query.blogType', { immediate: true, deep: true })
  blogTypeChange(newVal: string, oldVal: string) {
    this.blogType = newVal !== '' ? this.$route.query.blogType : '';
    this.typeName = newVal !== '' ? this.$route.query.typeName : '';
  }

  @Watch('$route.query.blogTag', { immediate: true, deep: true })
  blogTagChange(newVal: string, oldVal: string) {
    this.blogTag = newVal !== '' ? this.$route.query.blogTag : '';
  }

  /** 当前tab */
  private activeTab: string = 'recommend';

  /** 搜索类型 */
  private activeSearchTypeTab: string = 'article';

  /** 关键词 */
  private keyWord: any = this.$route.query.keyWord;

  /** 类型 */
  private blogType: any = this.$route.query.blogType;

  /** 类型名称 */
  private typeName: any = this.$route.query.typeName;

  /** 标签 */
  private blogTag: any = this.$route.query.blogTag;

  /** 搜索描述 */
  get searchDesc() {
    if (![null, undefined, ''].includes(this.keyWord)) {
      return '搜索关键字“' + this.keyWord + '"';
    }
    if (![null, undefined, ''].includes(this.blogType)) {
      return '搜索分类“' + this.typeName + '"';
    }
    if (![null, undefined, ''].includes(this.blogTag)) {
      return '搜索标签“' + this.blogTag + '"';
    }
    return '';
  }

  private mounted() {
    this.$nextTick(() => {
      const el:any = document.getElementById('layout-container');
      el.scrollTop = 0;
    })
  }

  /** Anchor变更 */
  private handleTabClick(tab: string) {
    this.activeTab = tab;
  }

  /** 搜索类型变更 */
  private handleSearchTypeTabClick(tab: string) {
    this.activeSearchTypeTab = tab;
  }
}
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.article-list-right-container {
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media only screen and (min-width: 850px) and (max-width: 1300px){
  .live2d-widget-container {
    opacity: 0.5 !important;
  }
  .article-list-right-container {
    flex-direction: column !important;
  }
}
@media only screen and (max-width: 850px) {
  .main-container {
    width: 100%;
    flex-direction: column;
  }
  .article-list-right-container {
    flex-direction: column !important;
  }
  .live2d-widget-container {
    opacity: 0.5 !important;
  }
}
</style>
